<template>
    <div>
        <!-- <a-modal
        :title="submitModalData.title"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        :confirm-loading="confirmLoading"
        :width="1000"
        :destroyOnClose="true"
        > -->
            <div >
                <a-form ref="form" :form="form" >
                    <a-form-item>
                        <!-- style="display: flex;justify-content: space-between;align-items: center;" -->
                        <div style="display: flex;flex-direction: row;padding-bottom: 10px;align-items: center;">
                            <div style="padding: 0;padding-right: 15px;">
                                <span>情况描述：</span>
                                <!-- <a-button @click="selecToftenUse('同意')" size="small" style="margin: 0 8px;color: #2F54EB;">同意</a-button>
                                <a-button @click="selecToftenUse('不同意')" size="small" style="color: #2F54EB;">不同意</a-button>
                                <a-button @click="selecToftenUse('已阅')" size="small" style="margin: 0 8px;color: #2F54EB;">已阅</a-button> -->
                                <a-button @click="selecToftenUse()" size="small" style="color: #2F54EB;" icon="ellipsis"></a-button>
                            </div>
                            <a-button @click="addOpinion" size="small" icon="plus">存为常用描述</a-button>
                        </div>
                        <a-textarea 
                            v-model:value="formState.opinion"
                            v-decorator="['opinion',{ initialValue:formState.opinion, rules: rules.opinion}]"
                            placeholder="请输入情况描述"
                            :autosize="{ minRows: 15, maxRows: 10000 }"
                            @blur="opinionBlur"
                        ></a-textarea>
                    </a-form-item>
                </a-form>
                <a-drawer
                    title="常用情况描述"
                    placement="right"
                    :closable="false"
                    :visible="drawerVisible"
                    @close="drawerVisible = false"
                    :width="150"
                    >
                        <div>
                            <a-input-search
                                :key="inputSearchKey"
                                placeholder="请输入内容"
                                enter-button="搜索"
                                size="small"
                                @search="onSearchOpinion"
                            />
                        </div>
                        <a-list :data-source="opinionsList" :loading="loading">
                            <a-list-item slot="renderItem" slot-scope="item, index">
                                <div @click="selelctOptitonText(item.fcontent)">{{ item.fcontent }}</div>
                                <div slot="actions">
                                    <a-icon @click="deleteOpinion(item)" type="delete" />
                                </div>
                            </a-list-item>
                        </a-list>
                    </a-drawer>
            </div>
        <!-- </a-modal> -->
    </div>
</template>
<script>
import {
    handlingOpinionsListServe,
    deleteBatchIdeaServe,
    addBatchIdeaServe,
} from './service/index'
export default {
    components:{

    },
    props:{
        parameterData:{
            type:Object,
            default:() => {},
            required:false,
        }
    },
    watch:{
        parameterData: {
            handler(newval, oldVal){
                //console.log(newval)
                if(newval){
                    this.getData(newval)
                }
            }
        }
    },
    data(){
        return{
            visible:false,
            drawerVisible:false,
            inputSearchKey:null,
            loading:false,
            opinionsList:[],
            opinionsData:{
                title:'办理意见',
                opinion:'',
                valueData:{},//填写完意见后获取意见到页面后方法返回的第二个参数
                opinionType:'',//意见类型
                isJudgeAfterClosing:false,//经过页面接口成功后才关闭窗口
            },
            submitModalData:{},
            formState:{opinion:''},
            form: this.$form.createForm(this, { name: 'processingConditionsFromName' }),
            rules:{
                opinion: [{
                    required: true,
                    message: '请输入办理意见',
                    trigger: 'blur',
                }],
            },
            confirmLoading:false,
        }
    },
    watch:{

    },
    mounted(){
        this.submitModalData = JSON.parse(JSON.stringify(this.opinionsData))
        if(this.parameterData){
            this.getData(this.parameterData)
        }
        // //console.log('获取到的意见',this.parameterData)
    },
    methods:{
        getData(val){
            // //console.log('获取到的意见',val)
            this.submitModalData = {...JSON.parse(JSON.stringify(this.opinionsData)),...val}
            this.formState.opinion = this.submitModalData.opinion
            this.form.setFieldsValue({
                opinion:this.submitModalData.opinion
            });
        },
        selecToftenUse(val){
            if(val){
                this.form.setFieldsValue({
                    opinion:val,
                });
                this.formState.opinion = val
                this.handleOk()
            }else{
                this.inputSearchKey = Date.now()
                this.drawerVisible = true
                this.getOpinionList(this.submitModalData)
                
            }
        },
        onSearchOpinion(val){
            //console.log('搜索内容',val)
            this.getOpinionList(this.submitModalData,val)
        },
        getOpinionList(val,content){
            this.loading = true
            let data = {}
            if(content){
                data = {ftype1:val.opinionType,pageNo:1,pageSize:100000,fcontent:content}
            }else{
                data = {ftype1:val.opinionType,pageNo:1,pageSize:100000}
            }
            handlingOpinionsListServe(data).then(res=>{
                if(res.code == 200){
                    this.opinionsList = res.result.records
                }
                this.loading = false
            })
        },
        addOpinion(){
            if(this.formState.opinion){
                addBatchIdeaServe({ftype1:this.submitModalData.opinionType,fcontent:this.formState.opinion}).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                this.$message.warning('当前输入框无内容')
            }
        },
        deleteOpinion(val){
            deleteBatchIdeaServe({ids:val.id}).then(res=>{
                if(res.code == 200){
                    this.getOpinionList(this.submitModalData)
                    this.$message.success(res.message)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        selelctOptitonText(val){
            this.formState.opinion = val
            this.form.setFieldsValue({
                opinion:val
            });
            this.drawerVisible = false
        },
        confirmLoadinghandle(val){//确定按钮状态
            this.confirmLoading = val
        },
        opinionBlur(){
            this.handleOk()
        },
        handleOk(){
            this.form.validateFields((err, values) => {
                if(!err){
                    this.$emit('getInputOpinion',values.opinion,{opinionType:this.submitModalData.opinionType,...this.submitModalData.valueData})
                    this.visible = this.submitModalData.isJudgeAfterClosing
                    this.confirmLoading = true
                }
            })
            
        },
        handleCancel(){
            this.visible = false
        },
    }
}
</script>